<!-- 页面公用导航 -->
<template>
	<div class="footer">
		<div class="app-footer">
			<a href="/home" class="router-item router-link-active">
				<i class="iconfont icon-house"></i>
				<span>首页</span>
			</a>
			<a href="/forward" class="router-item">
				<i class="iconfont icon-flight"></i>
				<span>前沿</span>
			</a>
			<div class="publish-btn" @touchend="evt_showPublish">
				<i class="iconfont icon-plus"></i>
			</div>
			<a href="/msg" class="router-item">
				<i class="iconfont icon-msg"></i>
				<span>消息</span>
			</a>
			<a href="/my" class="router-item">
				<i class="iconfont icon-geren"></i>
				<span>我的</span>
			</a>
		</div>
		<com-mask-publish></com-mask-publish>
	</div>
</template>
<script type="text/javascript">
	import { mapActions } from 'vuex'
	import * as Acts from '@/store/nav/consts'

	import ComPublish from './mask.publish'
	export default {
		name: 'com-nav',
		methods: {
			evt_showPublish() {
				this[Acts.SHOW_PANEL]();
			},
			...mapActions([Acts.SHOW_PANEL])
		},
		components: {
			[ComPublish.name]: ComPublish
		}
	}
</script>
<style lang="less">
	@import '../../assets/less/est/all';
	@import '../../assets/less/vars';

	.app-footer {
		.display(flex);
		.align-items(center);
		.justify-content(space-around);
		position: fixed;
		bottom: 0;
		left: 0;
		.size(100%, 1.2rem);
		background-color: @clr-l-grey;
		.router-item {
			.flex(1);
			.display(flex);
			.flex-direction(column);
			.align-items(center);
			font-size: .24rem;
			color: @clr-d-grey;
			.iconfont {
				padding-bottom: .12rem;
				font-size: .506rem;
			}
			&.router-link-active {
				color: @clr-org;
			}
		}
	}
	.publish-btn {
		.display(flex);
		.align-items(center);
		.justify-content(center);
		color: @clr-white;
		width: 1.33rem;
		height: 1.493rem;
		background-color: @clr-org;
		border-radius: 1.33rem 1.33rem 0 0;
		.iconfont {
			font-size: .8rem;
		}
		&.reverse { // 反色
			background-color: @clr-white;
			color: @clr-org;
		}
	}
</style>